<!--
  -- 描述：登录用户的所有推送消息列表窗口
  --
  -- 作者：cyq
  -- 时间：2018/9/18 10:44
-->
<template>
  <el-dialog title="历史消息列表" :visible.sync="visible" @close="$emit('update:show', false)" class="no-padding-dialog">
    <el-tabs v-model="activeTab" :stretch="true">
      <!--<el-tab-pane label="" name="user" v-loading="userMsgsLoading">-->
      <div class="no-msg-tip" v-if="userMsgs.length==0">暂无新的消息</div>
      <ul v-else class="msg-ul">
        <li v-for="item in userMsgs" :key="item.id" class="msg-li">
          <el-row>
            <el-col :span="20" class="msg-content">
              <span v-if="item.moduleName"><b>{{item.moduleName}}：</b></span>
              {{item.message}}
            </el-col>
            <el-col :span="4" class="msg-read-btn">
              <el-button v-if="!item.isRead" circle size="small" @click="readedMsg(item.id, 'user')">阅</el-button>
              <el-tag v-else type="success" size="mini">已读</el-tag>
            </el-col>
          </el-row>

          <el-row class="msg-footer">
            <el-tooltip class="item" effect="dark" content="发送人">
                <span class="msg-status">
                  <i class="fas fa-pen-square"></i>&nbsp;
                  {{
                  item.creator=='system'?'系统':item.creatorName
                  }}
                </span>
            </el-tooltip>&nbsp;&nbsp;
            <span class="msg-time"><i class="far fa-clock"></i>&nbsp;{{parseTime(item.createTime)}}</span>
          </el-row>
        </li>
      </ul>
      <el-row style="text-align: center;" v-if="userMsgsTotal>0">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="getUserMsgs"
          :page-size="5"
          :total="userMsgsTotal">
        </el-pagination>
      </el-row>
      <!--</el-tab-pane>-->
      <!--<el-tab-pane label="单位相关" name="org" v-loading="orgMsgsLoading">-->
      <!--<div class="no-msg-tip" v-if="orgMsgs.length==0">暂无新的消息</div>-->
      <!--<ul v-else class="msg-ul">-->
      <!--<li v-for="item in orgMsgs" :key="item.id" class="msg-li">-->
      <!--<el-row>-->
      <!--<el-col :span="20" class="msg-content">-->
      <!--<span v-if="item.moduleName"><b>{{item.moduleName}}：</b></span>-->
      <!--{{item.message}}-->
      <!--</el-col>-->
      <!--<el-col :span="4" class="msg-read-btn">-->
      <!--<el-button v-if="!item.readed" circle size="small" @click="readedMsg(item.id, 'org')">阅</el-button>-->
      <!--<el-tag v-else type="success" size="mini">已读</el-tag>-->
      <!--</el-col>-->
      <!--</el-row>-->

      <!--<el-row class="msg-footer">-->
      <!--<el-tooltip class="item" effect="dark" content="发送人">-->
      <!--<span class="msg-status">-->
      <!--<i class="fas fa-pen-square"></i>&nbsp;-->
      <!--{{-->
      <!--item.creator=='system'?'系统':item.creatorName-->
      <!--}}-->
      <!--</span>-->
      <!--</el-tooltip>&nbsp;&nbsp;-->
      <!--<el-tooltip class="item" effect="dark" content="已读人数">-->
      <!--<span class="msg-status"><i class="fas fa-book-reader"></i>&nbsp;{{item.totalReaded?item.totalReaded:0}}</span>-->
      <!--</el-tooltip>-->
      <!--<span class="msg-time"><i class="far fa-clock"></i>&nbsp;{{parseTime(item.createTime)}}</span>-->
      <!--</el-row>-->
      <!--</li>-->
      <!--</ul>-->
      <!--<el-row style="text-align: center;" v-if="orgMsgsTotal>0">-->
      <!--<el-pagination-->
      <!--background-->
      <!--layout="prev, pager, next"-->
      <!--@current-change="getOrgMsgs"-->
      <!--:page-size="5"-->
      <!--:total="orgMsgsTotal">-->
      <!--</el-pagination>-->
      <!--</el-row>-->
      <!--</el-tab-pane>-->
    </el-tabs>

    <!--<div slot="footer" class="dialog-footer" style="padding:0;text-align: center;">-->
    <!--<el-button type="success" round size="mini">全部标记已读</el-button>-->
    <!--</div>-->
  </el-dialog>
</template>

<script>
  export default {
    name: "UserMessagesDialog",
    props: ['show'],
    watch: {
      show() {
        this.visible = this.show;
      }
    },
    data() {
      return {
        visible: this.show,
        activeTab: 'user',
        userMsgsLoading: false,
        userMsgs: [],
        userMsgsTotal: 0,
        orgMsgsLoading: false,
        orgMsgs: [],
        orgMsgsTotal: 0,
        msgParams: {
          userId: this.$store.getters.userId,
          orgCode: this.$store.getters.orgCode,
          pageNumber: 1,
          pageSize: 5
        }
      }
    },
    mounted: function () {
      this.getUserMsgs();
      // this.getOrgMsgs();
    },
    methods: {
      getUserMsgs: function (curr) {
        this.userMsgsLoading = true;
        let params = JSON.parse(JSON.stringify(this.msgParams));
        params.userId = this.$store.getters.userId;
        params.orgCode = '';
        if (curr)
          params.pageNumber = curr;
        this.query(params, 'user');
      },
      getOrgMsgs: function (curr) {
        this.orgMsgsLoading = true;
        let params = JSON.parse(JSON.stringify(this.msgParams));
        params.userId = this.$store.getters.userId;
        params.orgCode = this.$store.getters.orgCode;
        if (curr)
          params.pageNumber = curr;
        this.query(params, 'org');
      },
      query: function (params, type) {
        this.api.post('/bucket-system/systemMsg/getLogPageList', params)
          .then((data) => {
            if (data.code == 200) {
              let list = data.data.records;
              if (type == 'user') {
                this.userMsgs = list;
                this.userMsgsTotal = data.data.total;
                this.userMsgsLoading = false;
              } else if (type == 'org') {
                this.orgMsgs = list;
                this.orgMsgsTotal = data.data.total;
                this.orgMsgsLoading = false;
              }
            } else {
            }
          });
      },
      parseTime: function (time) {
        return this.$moment(time).format('YYYY-MM-DD HH:mm:ss');
      },
      readedMsg: function (msgid, type) {
        let logList = [];
        let userid = this.$store.getters.userId;


        this.api.post('/bucket-system/systemMsg/msgRead', {id: msgid})
          .then((data) => {
            if (data.code === 200) {
              if (type === 'user')
                this.getUserMsgs();
              // else if(type=='org')
              //   this.getOrgMsgs();
            } else {
              this.$message({
                message: '标记已读失败',
                type: 'error'
              });
            }
          });
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .msg-ul {
    margin-bottom: 5px;

  .msg-li {
    padding: 5px 6px 5px 6px;
    border-bottom: 1px solid #efefef;

  .el-row {
    line-height: normal;
  }

  .msg-read-btn {
    text-align: right;
  }

  .msg-footer {
    font-size: 13px;
    margin-top: 7px;

  .msg-time {
    float: right;
    color: #cccccc;
  }

  .msg-status {
    color: #cccccc;
  }

  }
  }
  .msg-li:hover {
    background-color: #f9f9f9;

  .msg-content {
    color: #409EFF;
  }

  }
  }

  .no-msg-tip {
    text-align: center;
    padding: 0 0 10px 0;
    font-size: 16px;
    color: #b9b9b9;
  }

  .el-dialog__header {
    top: 2px;
  }

</style>
